<template>
  <div class="picSelector">
    <div class="upload acea-row row-center-wrapper" @click="openModal" :style="'width:'+size+'px;height:'+size+'px;'">
      <img :src="path" v-if="path != ''" alt="">
      <a-icon type="plus" v-else style="font-size:18px" />
      <a-icon type="close-circle" theme="filled" v-if="path != ''" class="clear" @click.stop="clearPath" />
    </div>
    <a-modal :footer="null" title="图片选择器" v-model="show" :width="1000" @cancel="show = false">
      <div class="acea-row">
        <div class="left">
          <a-tree-select
            v-model="classId"
            style="width: 100%"
            :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
            :tree-data="treeData"
            placeholder="搜索图片栏目"
            tree-default-expand-all
            allow-clear
            :replaceFields="{key:'id', value: 'id'}"
            @change="search"
          >
            <a-icon type="zoom-in" slot="suffixIcon"/>
          </a-tree-select>  
        </div>
        <div class="right">
          <div class="btns acea-row row-middle">
            <a-space>
              <a-button type="primary" v-if="is_check" @click="outPut">使用选中图片</a-button>
              <a-button type="primary" v-else disabled>使用选中图片</a-button>
              <a-upload
                name="pic"
                :action="basePath+'/upload/pic'"
                :showUploadList="false"
                @change="uploadChange"
              >
                <a-button type="primary" v-if="uploading"><a-icon type="loading" />上传中</a-button>
                <a-button type="primary" v-else>上传图片</a-button>
              </a-upload>
              <a-button type="danger" v-if="is_check" @click="delPic" >删除图片</a-button>
              <a-button type="danger" v-else disabled>删除图片</a-button>
              <a-button @click.stop="showAddModal = true">添加分类</a-button>
              <a-tree-select
                v-model="moveValue"
                style="width: 158px"
                :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
                :tree-data="treeData"
                placeholder="图片移动至"
                tree-default-expand-all
                allow-clear
                @change="move"
                :replaceFields="{key:'id', value: 'id'}"
              >
              </a-tree-select>  
            </a-space>
            <div class="picList acea-row row-middle">
              <img v-for="(item,index) in list" :key="index" :src="item.path" alt="" :class="item.is_check?'imgCheck':''" @click="imgClick(item.id)">
            </div>
            <div class="page acea-row row-middle">
              <a-pagination
                style="margin-right:10px"
                show-quick-jumper
                :default-current="page"
                :total="count"
                @change="pageChange"
              /> 
              共{{count}}张
            </div>
          </div>
        </div>
      </div>
    </a-modal>
    <modal title="添加分类" :show="showAddModal" @close="hideModal" width="500px">
      <a-form-model layout="horizontal" :model="classForm" ref="classForm" :label-col="labelCol" :wrapper-col="wrapperCol">
        <a-form-model-item label="选则父级栏目" prop="pid" required>
          <a-tree-select
            v-model="classForm.pid"
            style="width: 300px"
            :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
            :tree-data="treeData2"
            tree-default-expand-all
            allow-clear
            :replaceFields="{key:'id', value: 'id'}"
          >
          </a-tree-select>  
        </a-form-model-item>
        <a-form-model-item label="分类名称" prop="title" required>
          <a-input v-model="classForm.title" style="width:300px" />
        </a-form-model-item>
        <a-form-model-item :wrapper-col="{ span: 14, offset: 6 }">
          <a-button type="primary" @click="addClass">添加</a-button>
        </a-form-model-item>
      </a-form-model>
    </modal>
  </div>
</template>

<script>
import config from 'public/config/config.js'
import request from 'api/request'
import modal from 'components/common/modal'

export default {
  props:{
    value:{
      type:String,
    },
    size:{
      type:[String,Number],
      default:58
    }
  },
  data(){
    return{
      labelCol: { span: 6 },
      wrapperCol: { span: 14 },
      show:false,
      showAddModal:false,
      classId:null,
      moveValue:null,
      basePath:config.basePath,
      uploading:false,
      page:1,
      limit:10,
      list:[],
      count:0,
      is_check:false, //是否有图片选中
      check_id:0, //选中图片id
      visible:false,
      treeData:[],
      treeData2:[],
      path:"",
      classForm:{
        title:'',
        pid:null
      }
    }
  },
  created() {
    this.getPath(this.value)
  },
  methods: {
    openModal(){
      this.show = true
      this.getPicList()
      this.getClass()
      this.getPath(this.value)
    },
    getPath(value){
      if(value.indexOf('upload/pic/') != -1){
        this.path = value
      }else{
        this.path = ""
      }
    },
    clearPath(){
      this.path = ""
      this.$emit("confirm",'')
    },
    getPicList(){
      this.is_check = false
      const that = this
      let data = {
        page:this.page,
        limit:this.limit,
        class:this.classId
      }
      request.get("/pic/list",data).then(e=>{
        if(e.status == 200){
          for(let i of e.data.list){
            i.is_check = false
          }
          that.list = e.data.list
          that.count = e.data.count
        }
      })
    },
    getClass(){
      const that = this
      request.get("/pic/class/list").then(e=>{
        if(e.status == 200){
          let arr = []
          for(let i of e.data){
            let f = e.data.filter(s=>s.pid == i.id)
            if(f.length != 0){
              i.children = f
            }
            if(i.pid == 0){
              arr.push(i)
            }
          }
          that.treeData = JSON.parse(JSON.stringify(arr))
          arr.unshift({id:0,title:'顶级栏目'})
          that.treeData2 = arr
        }
      })
    },
    outPut(){
      if(this.is_check){
        let path = this.list.find(e=>e.id == this.check_id).path
        this.$emit("confirm",path)
        this.show = false
      }else{
        this.$message.error("未选中图片")
      }
    },
    search(e){
      this.getPicList()
    },
    pageChange(e){
      this.page = e
      this.getPicList()
    },
    imgClick(id){
      for(let i of this.list){
        if(i.id == id){
          this.is_check = true
          this.check_id = id
          i.is_check = true
        }else{
          i.is_check = false
        }
      }
    },
    addClass(){
      const that = this
      this.$refs.classForm.validate(vaild=>{
        if(vaild){
          console.log(this.classForm)
          request.post("/pic/class/add",this.classForm).then(e=>{
            if(e.status == 200){
              that.getClass()
              that.hideModal()
              that.$message.success("添加成功")
            }
          })
        }
      })
    },
    move(e){
      const that = this
      if(e){
        if(this.is_check){
          let data = {
            id:this.check_id,
            class:this.moveValue
          }
          request.post("/pic/edit",data).then(e=>{
            if(e.status == 200){
              that.moveValue = null
              that.$message.success("移动成功")
              that.getPicList()
            }
          })
        }else{
          that.moveValue = null
          this.$message.error("未选中图片")
        }
      }
    },
    delPic(){
      const that = this
      if(this.is_check){
        let data = {
          id:this.check_id,
        }
        request.post("/pic/del",data).then(e=>{
          if(e.status == 200){
            that.getPicList()
            that.$message.success("删除成功")
          }
        })
      }else{
        this.$message.error("未选中图片")
      }
    },
    uploadChange(info){
      if (info.file.status === 'uploading') {
        this.uploading = true;
        return;
      }
      if (info.file.status === 'done') {
        // Get this url from response in real world.
        let res = info.file.response
        this.uploading = false;
        if(res.status == 200){
          this.$message.success(res.msg)
          this.getPicList()
        }else{
          this.$message.error(res.msg)
        }
      }
    },
    hideModal(){
      this.showAddModal = false
      this.$refs.classForm.resetFields()
    },
  },
  watch:{
    value(e){
      this.getPath(e)
    }
  },
  components:{
    modal
  },
}
</script>

<style scoped>
  .picSelector .upload{
    border: 1px dotted rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.02);
    cursor: pointer;
    position: relative;
  }
  .picSelector .upload .clear{
    color: #f5222d;
    font-size: 14px;
    position: absolute;
    top: -7px;
    right: -7px;
  }
  .left{
    width: calc(30% - 24px);
    padding-right: 24px;
    border-right: 1px solid #eeeeee;
  }
  .right{
    padding-left: 24px;
    flex: 1;
  }
  .right .picList{
    width: 100%;
    margin-top: 24px;
  }
  .right .picList img{
    display: block;
    width: 120px;
    height: 120px;
    margin-bottom: 10px;
    margin-right: 10px;
    cursor: pointer;
    box-sizing: border-box;
  }
  .right .picList .imgCheck{
    border: 2px solid #5fb878;
  }
  .right .picList img:nth-child(5n){
    margin-right: 0;
  }
  .right .page{
    margin-top: 20px;
  }
</style>